import type { FC } from "react";

export interface GoodsListProps {
  onClick?: (item: Record<string, any>) => void;
  products: Array<Record<string, any>>;
}

export const GoodsList: FC<GoodsListProps> = (props) => {
  const { onClick, products } = props;
  return (
    <div className="p-4">
      <div className="columns-2 md:columns-3" style={{ columnGap: "1rem" }}>
        {products.map((p) => (
          <div
            className="break-inside-avoid bg-white shadow rounded overflow-hidden mb-4"
            onClick={() => {
              onClick?.(p);
            }}
            key={p.id}
          >
            <img
              src={"http://localhost:8080/" + p.mainImage}
              className="w-full"
            />
            <div className="p-2">
              <p className="text-sm">{p.name}</p>
              <p className="text-lg text-red-500 font-bold">{p.price}</p>
            </div>
          </div>
        ))}
      </div>
    </div>
  );
};
